<template>
  <div id="contain">
    <div>
      <div style="width: 1200px; margin: 0 auto">
        <div class="huiBox" @click="$router.push('/')">
          <i class="el-icon-s-home"></i>
          <span class="huishouye">回首页</span>
        </div>
        <div class="searchBox">
          <input type="text" class="inp" v-model="searchValue" />
          <span class="sp" @click="goSearch"
            ><i class="el-icon-search"></i
          ></span>
        </div>
      </div>
      <template>
        <el-tabs v-model="activeIndex">
          <el-tab-pane label="景点" @click="activeIndex=0" v-if="searchResult.scenic.length !== 0">
            <div>
              <div
                  v-for="(item, index) in searchResult.scenic"
                  :key="index"
                  style="
            width: 255px;
            height: 220px;
            float: left;
            margin: 15px;
          "
                  @click="godetails('jddetails', item.areaId)"
              >
                <img :src="item.pic" alt="" style="width: 255px; height: 180px" />
                <p>{{ item.name }}</p>
                <p class="introtext">{{ item.introduction }}</p>
              </div>
              <div style="clear: both"></div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="线路" @click="activeIndex=1" v-if="searchResult.goods.length !== 0">
            <div>
              <div
                  v-for="(item, index) in searchResult.goods"
                  :key="index"
                  style="width: 255px; height: 220px; float: left; margin: 15px"
                  @click="godetails('xldetails', item.goodsId)"
              >
                <img :src="item.pic" alt="" style="width: 255px; height: 180px" />
                <p class="introtext">{{ item.name }}</p>
              </div>
              <div style="clear: both"></div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="酒店" @click="activeIndex=2" v-if="searchResult.hotel.length !== 0">
              <div
                  v-for="(item, index) in searchResult.hotel"
                  :key="index"
                  style="width: 255px; height: 220px; float: left; margin: 15px"
                  @click="godetails('jiudiandetails', item.goodsId)"
              >
                <img :src="item.pic" alt="" style="width: 255px; height: 180px" />
                <p class="introtext">{{ item.name }}</p>
              </div>
              <div style="clear: both"></div>
            </el-tab-pane>
          <el-tab-pane label="攻略" @click="activeIndex=3" v-if="searchResult.strategy.length !== 0"  >
            <div
                v-for="(item, index) in searchResult.strategy"
                :key="index"
                class="box1"
                @click="goRaiderDetail(item.strategyId)"
            >
              <img :src="item.pics" alt="" style="width:400px;height:250px" />
              <div style="margin:50px 20px">{{ item.content }}</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="用户" @click="activeIndex=4" v-if="searchResult.user.length !== 0">用户</el-tab-pane>
        </el-tabs>
      </template>
      <div class="con" v-show="showList[0]">
        <div class="value">
          <div v-for="(item, index) in showList" :key="index" class="forDiv">
            <div @click="godetails(item.areaId)">
              <img :src="item.pic" alt="" style="width: 255px; height: 180px" />
              <p>{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
      <div v-show="noInfo">
        <div class="noSearchDiv">{{ noInfo }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: "",
      showList: [],
      noInfo: "",
      activeIndex: 0,
      searchResult: {
        scenic: [],
        user: [],
        hotel: [],
        goods: [],
        strategy: []
      }
    };
  },
  mounted() {
    this.searchValue = this.$route.query.text;
    this.goSearch();
  },
  methods: {
    goRaiderDetail(strategyId) {
      this.$router.push({
        path: "/raider",
        query: {
          strategyId,
        },
      });
    },
    goSearch() {
      this.$route.query.text = this.searchValue
      if (this.searchValue) {
        this.$axios({
          method: "post",
          url: "/static/search/global",
          data: { keyword: this.searchValue },
        }).then((res) => {
          if (res.data.code === 0) {
            this.searchResult = res.data
          }
          if (res.data.code === 500) {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          }
        });
      }
    },
    godetails(route, areId){
      this.$router.push({path: route,query:{areId:areId}})
    }
  },
};
</script>
<style  scoped>
.searchBox {
  width: 800px;
  height: 70px;
  margin: 4px auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.inp {
  display: inline-block;
  width: 720px;
  height: 60px;
  border-radius: 5px;
  font-size: 18px;
  padding-left: 10px;
  border: 2px solid #ff9d00;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: 0;
}
.sp {
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: #ff9d00;
  border-radius: 10%;
  text-align: center;
}
.el-icon-search {
  font-size: 30px;
  color: white;
  text-align: center;
  line-height: 60px;
}
.con {
  margin-top: 10px;
  border-top: 1px solid #ccc;
}
.value {
  width: 1200px;
  margin: 0 auto;
}
.el-icon-s-home {
  color: #ff9d00;
  font-size: 30px;
}
.huishouye {
  margin-left: 4px;
  color: #888;
}
.huiBox {
  float: left;
  margin-top: 15px;
  cursor: pointer;
}
.forDiv {
  width: 255px;
  height: 220px;
  border: 1px solid green;
  float: left;
  margin: 8px;
}
.noSearchDiv {
  width: 300px;
  margin: 100px auto;
  font-size: 24px;
  color: red;
}
.introtext {
  margin: 0 auto;
  width: 245px;
  height: 34px;
  font-size: 13px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>>
